<template>
    <div>
        <van-nav-bar title="忘记密码" left-arrow @click-left="backUp"></van-nav-bar>
        <div class="register">
            <van-cell-group>
                <van-field
                        required
                        type="tel"
                        placeholder="请输入手机号码"
                        label="手机号码"
                        v-model="data.mobile"
                        :error-message="errorMsg.mobile"
                        clearable
                ></van-field>
                <van-field
                        center
                        v-model="data.code"
                        label="短信验证码"
                        placeholder="请输入验证码"
                        :error-message="errorMsg.code"
                        required
                        clearable
                >
                    <van-button
                            slot="button"
                            size="small"
                            type="danger"
                            :disabled="countdown > 0"
                            @click="sendMobileCode"
                    >{{ countdown ? countdown + 's' : '发送'}}
                    </van-button>
                </van-field>
            </van-cell-group>
            <van-cell-group class="mt10">
                <van-field
                        v-model="data.pwd"
                        type="password"
                        label="新密码"
                        placeholder="请输入新密码"
                        required
                        :error-message="errorMsg.pwd"
                        clearable
                />
                <van-field
                        v-model="data.password2"
                        type="password"
                        label="确认密码"
                        placeholder="请再次输入密码"
                        :error-message="errorMsg.password2"
                        required
                        clearable
                />
            </van-cell-group>
            <div class="register-btn">
                <van-button block @click="reset">重置</van-button>
                <van-button block type="danger" @click.stop="submit">提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import validator from "@/utils/validation.js";
    import api from "@/utils/restful.js";
    import axios from "axios";

    export default {
        name: "forget",
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.data.pwd) {
                    callback(new Error("两次输入密码不一致"));
                } else {
                    callback();
                }
            };
            return {
                countdown: 0,
                data: {
                    mobile: "",
                    code: "",
                    pwd: "",
                    password2: ""
                },
                errorMsg: {
                    mobile: "",
                    pwd: "",
                    code: "",
                    password2: ""
                },
                rules: {
                    mobile: [
                        {
                            validator: (rule, value, callback) => {
                                if (!value) {
                                    callback("手机号码不能为空");
                                } else if (/^[1][3-9][0-9]{9}$/.test(value)) {
                                    callback();
                                } else {
                                    callback("请输入正确的手机号码");
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    code: [{required: true, message: "请输入验证码"}],
                    pwd: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur"}
                    ],
                    password2: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {
                            min: 6,
                            max: 30,
                            message: "长度在 6 到 30 个字符",
                            trigger: "blur"
                        },
                        {validator: validatePass2, trigger: "blur"}
                    ]
                }
            };
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            submit() {
                const instance = axios.create({});
                this.validate((errors, fields) => {
                    console.log(errors, fields);
                    if (!errors) {
                        instance({
                            method: "post",
                            url: api.resetPwd,
                            data: this.$qs.stringify({
                                mobile: this.data.mobile,
                                vCode: this.data.code,
                                password: this.data.pwd
                            })
                        }).then(res => {
                            console.log(res.data);
                            this.$toast(res.data.msg);
                            if (res.data.code == 200) {
                                setTimeout(() => {
                                    this.$router.push("/login");
                                }, 500);
                            }
                        });
                    }
                });
            },
            sendMobileCode() {
                this.validate(errors => {
                    if (!errors) {
                        this.countdown = 60;
                        this.countdownSubtract();
                    }
                }, "mobile");
                this.$axios({
                    method: "post",
                    url: api.resetPwdVCode,
                    params: {
                        mobile: this.data.mobile
                    }
                }).then(res => {
                    console.log(res);
                    Toast(res.msg);
                });
            },
            countdownSubtract() {
                if (this.countdown > 0) {
                    setTimeout(() => {
                        this.countdown -= 1;
                        this.countdownSubtract();
                    }, 1000);
                }
            },

            resetField(attrs) {
                attrs = !attrs
                    ? Object.keys(this.errorMsg)
                    : Array.isArray(attrs)
                        ? attrs
                        : [attrs];
                attrs.forEach(attr => {
                    this.errorMsg[attr] = "";
                });
            },

            validate(callback, data) {
                this.validator.validate((errors, fields) => {
                    this.resetField();
                    if (errors) {
                        fields.forEach(item => {
                            this.errorMsg[item.field] = item.message;
                        });
                    }
                    callback && callback(errors, fields);
                }, data);
            },

            reset() {
                this.data = {
                    name: "",
                    code: "",
                    mobile: "",
                    pwd: "",
                    password2: "",
                    address: "",
                    company: ""
                };
                this.validator.setData(this.data);
                this.resetField();
            }
        },
        created() {
            this.validator = validator(this.rules, this.data);
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .register {
        background-color: @borderColor;
        // background-color: #f00;

        // border: 1px solid red;
        height: calc(100vh - 1.3rem);

        .van-cell-group {
            padding: 0 20px;
        }
    }

    .register-btn {
        margin-top: 60px;
        display: flex;
        justify-content: space-around;

        button {
            height: 0.9rem;
            line-height: 0.9rem;
            flex-basis: 40%;
            padding: 0;
            border-radius: 20px;
        }

        button:first-child {
            transform: translateY(0);
        }
    }

    .mt10 {
        margin-top: 10px;
    }

    /deep/ .van-field__button {
        background-color: transparent;
        // border: 1Px solid @priColor;
        padding: 0;

        .van-button {
            border-radius: 16px;
        }
    }

    /deep/ .van-cell {
        .font-dpr(40px) !important;
    }
</style>
